<%@ page language="java" contentType="text/html; charset=UTF-8"
		 pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta http-equiv="Content-Language" content="zh-CN">
	<title>操作提示 - 智能选课系统</title>
	<style>
		* {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
			font-family: 'Microsoft YaHei', 'Segoe UI', Tahoma, sans-serif;
		}

		body {
			background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
			height: 100vh;
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 20px;
		}

		.message-container {
			background: white;
			border-radius: 16px;
			box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
			padding: 40px;
			text-align: center;
			max-width: 500px;
			width: 100%;
			animation: fadeInUp 0.6s ease;
		}

		.message-icon {
			width: 80px;
			height: 80px;
			background: linear-gradient(135deg, #ff6b6b, #ee5a52);
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 0 auto 20px;
		}

		.message-icon svg {
			width: 40px;
			height: 40px;
			fill: white;
		}

		.message-title {
			color: #2c3e50;
			font-size: 24px;
			font-weight: 600;
			margin-bottom: 15px;
		}

		.message-content {
			background: #fff5f5;
			padding: 20px;
			border-radius: 12px;
			margin: 20px 0;
			border-left: 4px solid #ff6b6b;
		}

		.message-text {
			color: #c92a2a;
			font-size: 16px;
			line-height: 1.6;
			margin-bottom: 0;
		}

		.action-buttons {
			margin-top: 25px;
			display: flex;
			gap: 15px;
			justify-content: center;
		}

		.btn {
			padding: 12px 24px;
			border: none;
			border-radius: 8px;
			font-size: 14px;
			font-weight: 600;
			cursor: pointer;
			transition: all 0.3s ease;
		}

		.btn-back {
			background: linear-gradient(135deg, #4ecdc4, #44a08d);
			color: white;
			box-shadow: 0 4px 12px rgba(78, 205, 196, 0.3);
		}

		.btn-back:hover {
			transform: translateY(-2px);
			box-shadow: 0 6px 16px rgba(78, 205, 196, 0.4);
		}

		.btn-home {
			background: linear-gradient(135deg, #a8edea, #fed6e3);
			color: #495057;
			border: 2px solid #dee2e6;
		}

		.btn-home:hover {
			background: linear-gradient(135deg, #fed6e3, #a8edea);
			transform: translateY(-2px);
		}

		@keyframes fadeInUp {
			from {
				opacity: 0;
				transform: translateY(30px);
			}
			to {
				opacity: 1;
				transform: translateY(0);
			}
		}

		@keyframes pulse {
			0% { transform: scale(1); }
			50% { transform: scale(1.05); }
			100% { transform: scale(1); }
		}

		.message-container {
			animation: fadeInUp 0.6s ease, pulse 2s ease-in-out 0.6s;
		}
	</style>
	<script type="text/javascript">
		// 显示美化后的提示信息并返回
		document.addEventListener('DOMContentLoaded', function() {
			const message = "${message}";

			// 更新页面内容
			document.querySelector('.message-text').textContent = message;

			// 添加返回按钮功能
			document.getElementById('backButton').addEventListener('click', function() {
				window.history.back(-1);
				window.history.back(-1);
			});

			// 添加首页按钮功能
			document.getElementById('homeButton').addEventListener('click', function() {
				// 这里可以根据实际情况设置首页URL
				window.location.href = '/YourAppContext/';
			});
		});
	</script>
</head>
<body>
<div class="message-container">
	<div class="message-icon">
		<svg viewBox="0 0 24 24">
			<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/>
		</svg>
	</div>
	<h1 class="message-title">操作提示</h1>
	<div class="message-content">
		<p class="message-text">${message}</p>
	</div>
	<div class="back-btn">
		<a href="javascript:history.back()"><i class="fas fa-arrow-left"></i> 返回</a>
	</div>
</div>

</body>
</html>